<template>
<!-- filterShow -->
  <div class="shade" v-show="filterShow">
    <div v-show="false">{{defaultCountry}}</div>
    <div class="shadeChoose">
      <div class="vicp-close"  @click="filterShow=false">
        <i class="el-icon-close vicp-icon4"></i>
      </div>
      <div class="shadeMain">
        <div class="channelsChoose">
          <div class="chinnelSwitch">
            <span class="switch">选择国家：</span>
            <span class="chooseEnd">
              已选择
              <span :style="{'color':this.$store.getters.theme[1]}">{{countryTagValue?countryTagValue:"0"}}</span>
              项
            </span>
          </div>
          <div class="chinnelRadio">
            <div class="filter" >
              <el-input v-model="countryVal" placeholder="请输入国家名称" icon="search"></el-input>
            </div>
            <template>
              <el-radio-group v-model="countryRadio"  @change="channelRadioChange">
                <el-radio :label="item.label" v-for="item in newCountries">{{item.value}}</el-radio>
              </el-radio-group>
            </template>
            <div class="afterChoose">
              <span>选中筛选条件：</span>
              <el-tag v-show="countryTagValue"
                  :closable="true" type="success"
                  @close="handleClose(tag)"
                >{{countryTagValue}}</el-tag>
            </div>
          </div>
        </div>
        <div class="serversChoose">
          <div class="serverSwitch">
            <span class="switch">选择区服：</span>
            <el-switch
            v-model="serverSwitch"
            on-color="#13ce66"
            off-color="#ff4949" @change="s_s_change"></el-switch>
            <span class="chooseEnd">
              已选择
              <span :style="{'color':this.$store.getters.theme[1]}">{{serverTagValue?serverTagValue:"0"}}</span>
              项
            </span>
          </div>
          <div class="chinnelRadio" v-show="serverSwitch">
            <div class="filter">
              <el-input v-model="serverVal" placeholder="请输入服务器名称" icon="search"></el-input>
              <el-button type="info" size="small" @click='allServer'>全服</el-button>
              <el-button type="info" size="small" @click='noAllServer'>非全服</el-button>
            </div>
            <template>
              <el-radio-group v-model="serverRadio"  @change="serverRadioChange">
                <el-radio :label="item.label" v-for="item in newServers">{{item.value}}</el-radio>
              </el-radio-group>
            </template>
            <div class="afterChoose">
              <span>选中筛选条件：</span>
              <el-tag v-show="serverTagValue"
                  :closable="true" type="success"
                  @close="handleClose2(tag)"
                >{{serverTagValue}}</el-tag>
            </div>
          </div>
        </div>
        <div class="sureBtn">
          <el-button type="info" @click='sure'>确认</el-button>
          <el-button type="danger" @click="cancel">取消</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return{
        // 高级筛选模态框
        filterShow: false,
        // 服务器筛选开关
        serverSwitch: false,
        // countryVal渠道的搜索框的值
        countryVal: '',
        // 服务器的搜索框的值
        serverVal: '',
        // 渠道单选按钮值
        countryRadio: "0",
        // 区服单选按钮值
        serverRadio: "0",
        // 渠道标签
        countryTagValue: '',
        // 区服标签
        serverTagValue: '全区服'
      }
    },
    methods: {
      // 通用 成功 与 失败
      successFun(data) {
        this.$message({
          message: data,
          type: 'success'
        });
      },
      errorFun(data) {
        this.$message.error(data);
      },
      // 全服点击按钮
      allServer() {
        this.serverRadio = "0";
      },
      // 非全服按钮点击
      noAllServer() {
        if(this.serverRadio !== "0"){
          this.errorFun("已经是非全服！")
        }else{
          this.serverRadio = "";
          this.serverTagValue = "";
        }
      },
      // 服务器开关函数
      s_s_change(val) {
        this.serverRadio = "0";
      },
      //国家单选按钮函数
      channelRadioChange(val) {
        for(var i in this.countries){
          if(val === this.countries[i]['label']){
            this.countryTagValue = this.countries[i]['value']
          }
        }
        this.postObj.countryid = val;
      },
      //服务器单选按钮函数
      serverRadioChange(val) {
        for(var i in this.servers){
          if(val === this.servers[i]['label']){
            this.serverTagValue = this.servers[i]['value']
          }
        }
        this.postObj.serverid = val;
      },
      // 模态框确定
      sure() {
        if(this.postObj.serverid === ''){
          this.errorFun("请选择服务器！")
        }else if(this.postObj.countryid === ''){
          this.errorFun("请选择国家！")
        }else{
          this.filterShow = false;
          console.log(this.postObj)
          this.$emit('get',this.postObj)
        }
      },
      // 模态框取消关闭数据不记录
      cancel() {
        this.filterShow = false;
        this.countryRadio = this.countries[0]["label"];
        this.serverRadio = '0';
      },
      // 渠道标签点击
      handleClose(tag) {
        this.countryRadio = "";
        this.countryTagValue = "";
      },
      // 区服标签点击
      handleClose2(tag) {
        this.serverRadio = "";
        this.serverTagValue = "";
      },
    },
    computed: {
      // 渠道过滤
      newCountries: function() {
        var that = this;
        return that.countries.filter(function(item) {
          return item.value.toLowerCase().indexOf(that.countryVal.toLowerCase()) !== -1;
        })
      },
      // 区服过滤
      newServers: function() {
        var that = this;
        return that.servers.filter(function(item) {
          return item.value.toLowerCase().indexOf(that.serverVal.toLowerCase()) !== -1;
        })
      },
      // 默认国家
      defaultCountry: function() {
        if(this.countries.length === 0){
          return ""
        }else{
          this.countryTagValue = this.countries[0]["value"];
          this.countryRadio = this.countries[0]["label"];
          return this.countries[0]["value"]
        }
      },
      defaultServer: function() {
        if(this.servers.length === 0){
          return ""
        }else{
          this.serverTagValue = this.servers[0]["value"];
          this.serverRadio = this.servers[0]["label"];
          return this.servers[0]["value"]
        }
      }
    },
    props: ['countries','servers','postObj']
  }
</script>